import React, { Component } from 'react';

import {good_goodinfo,good_fav,shopcart_add} from "../api/index"


import { Swiper,NavBar,Button,Skeleton,Toast,Divider} from 'antd-mobile'
import { StarOutline, SendOutline, TransportQRcodeOutline,StarFill } from "antd-mobile-icons";

import "../styles/detail.css"
import MyList from "../components/MyList"

class GoodsDetail extends Component {
    constructor(props){
        super(props);
        this.state={
            detaillist:"",
            bannerlist:[],
            detailname:{},
            collect:0,
            userid:localStorage.getItem("userid")
        }
    }
    async componentDidMount(){
        console.log(this.props.match.params.goodid);
        var res=await good_goodinfo({goodid:this.props.match.params.goodid});
        console.log(res.data);
        this.setState({
            detaillist:res.data.goodinfo.salesPrice.value,
            bannerlist:res.data.goodinfo.pics,
            detailname:res.data.goodinfo
        },()=>{
            console.log("获取到后的",this.state.detaillist);
        })
    }
    goback(){
        this.props.history.go(-1)
    }
    async gocollact(goodid){
        var res=await good_fav({userid:this.state.userid,goodid})
        console.log(res);
        if (res.data.code==200) {
            this.setState({
                collect:1
            })
            Toast.show({
                content: '收藏成功！',
            })
        }
        
    }
    // 添加购物车
    async addcart(goodid){
        var res=await shopcart_add({userid:this.state.userid,goodid})
        Toast.show('添加购物车成功')
        console.log(res);
    }

    // 跳转购物车
    gocar(){
        this.props.history.push("/index/shopcart")
    }
    render() {
        return (
            <div className='goodsdetail-box'>
                <div className='goodsdetail-goback'>
                    <NavBar onBack={()=>{this.goback()}}>商品详情</NavBar>
                </div>
                {/* 如果拿到详情数据, 渲染商品详情, 否则渲染骨架屏 */}

                {
                    this.state.bannerlist && 
                    this.state.bannerlist.length?
                    <>
                        <Swiper loop autoplay autoplayInterval={3000}>
                            {
                                this.state.bannerlist.map((item,index)=>{
                                    return (
                                        <Swiper.Item key={index}>
                                            <img src={item} alt="" />
                                        </Swiper.Item>
                                    )
                                })
                            }
                        </Swiper>
                            <div className='goodsdetail-price'>
                            活动价：
                            <span className='goodsdetail-qian'>
                                ￥{ 
                                    this.state.detaillist ?
                                    this.state.detaillist  : 0
                                }
                            </span>
                            </div>
                            <div className='goodsdetail-bao'>
                                包邮包税
                            </div>

                            <div className='goodsdetail-reduce'>
                                <div className='goodsdetail-brandEN'>
                                    {this.state.detailname.brandEN}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                </div>
                                <div className='goodsdetail-brand'>
                                    {this.state.detailname.brand}&nbsp;&nbsp;&nbsp;&nbsp;
                                </div>
                                <div className='goodsdetail-name'>
                                    {this.state.detailname.name}
                                </div>
                            </div>

                    </>:

                    <>
                        <Skeleton.Title animated />
                        <Skeleton.Paragraph lineCount={10} animated />
                    </>
                }

                <Divider
                    style={{
                        // color: '#1677ff',
                        // borderColor: '#1677ff',
                        // borderStyle: 'dashed',
                        // margin:'70px 0',
                    }}
                    >
                     猜你喜欢
                    </Divider>
                <MyList></MyList>
                <div className='goodsdetail-box-xia'>
                <div className="goodsdetail-box-bottom">
                    <ul>
                        <li onClick={()=>{this.gocollact(this.state.detailname.id)}}>
                            {
                                this.state.collect===0?
                                // 要是等于0就是空心的
                                <StarOutline fontSize={26}/>:
                                // 要是等于1就是实心的
                                <StarFill fontSize={26} className="goodsdetail-starfill"/>
                            }
                            收藏
                        </li> 
                        <li> 
                            <SendOutline fontSize={26}/>
                            分享
                        </li>
                        <li>
                        <TransportQRcodeOutline  fontSize={26} onClick={()=>{
                            this.gocar()
                        }}/>
                            购物车
                        </li>
                        <li className="anniu">
                            <Button color="danger" className="button-left" 
                            onClick={()=>{
                                this.addcart(this.state.detailname.id)
                            }}
                            >加入购物车</Button>
                            <Button color="warning" className="button-right">立即购买</Button>
                        </li>
                
                    </ul>
                </div>
                </div>
                
            </div>
        );
    }
}

export default GoodsDetail;
